<template>
    <div class="Bread">
  <Bread></Bread>
  </div>
    <!-- 数据列表 -->
    <el-card shadow="always">
        <div class="data-list">
            <div class="left">
                <el-icon size="16">
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right">
                <el-button type="primary" @click="addlist(0,null)">添加</el-button>
            </div>
        </div>
    </el-card>
    <!-- 表格 -->
    <el-table ref="multipleTableRef" :data="tableData.list" style="width: 100%" :border="true"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="编号" width="55" />
        <el-table-column prop="name" label="属性名称" />
        <el-table-column label="商品类型">
            <template #default="scope">
                {{ listaat.name }}
            </template>
        </el-table-column>

        <el-table-column prop="selectType" label="属性是否可选">
            <template #default="scope">
                <div v-if="scope.row.selectType === 0">唯一</div>
                <div v-else-if="scope.row.selectType === 1">单选</div>
                <div v-else>多选</div>
            </template>
        </el-table-column>
        <el-table-column label="属性值的录入方式">
            <template #default="scope">
                {{ scope.row.inputType === 0 ? '手工录入' : '从列表中选取' }}
            </template>
        </el-table-column>

        <el-table-column prop="inputList" label="可选值列表" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column label="操作" width="150">
            <template #default="scope">
                <el-button size="small" @click="addlist(1, scope.row.id)">编辑</el-button>
                <el-button type="danger" @click="deleet(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="foot">
        <div style="display: flex;margin-top: 23px;">
            <el-form-item>
                <el-select v-model="a.aslist" placeholder="批量操作">
                    <el-option v-for="item in Operationstatus" label="批量删除" :value="item" />
                </el-select>
            </el-form-item>
            &nbsp;
            <el-form-item>
                <template #default="scope">
                    <el-button type="primary" @click="deleetlist">Create</el-button>
                </template>

            </el-form-item>
        </div>
        <!-- 分页 -->
        <el-pagination v-model:current-page="tableData.pageNum" v-model="tableData.pageSize" :page-sizes="[1, 5, 10, 20]"
            background layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang='ts'>
import { reactive, ref, Ref } from "vue"
import { useRoute, useRouter } from 'vue-router'
import * as api from '../../request/api'
import type { productAttrItem, productAttrParams, productAttrRes } from '../../request/PmsProductAttributeCategoryController'
import Bread from "@/components/Bread.vue";


let route = useRoute()
let router = useRouter()
let listaat = route.query
let listtype = Number(listaat.type)

let tableData = reactive({
    list: <any>[],
    pageNum: 1,
    pageSize: 10,
    total: 0,
    totalPage: 0
})
let a = reactive({
    aslist: '',
})
//选择操作状态
let Operationstatus = [0]
//id数组
let ids = ref([]) as Ref<number | number[]>


// interface.
//获取到id
let handleSelectionChange = (val: any) => {
    // console.log(val);
    let a=val.map((item)=>{
        return item.id
    })
    // console.log(a);
    ids.value=a
    
    // console.log(ids.value);
    // // console.log(ids.value.toString());
    // //转为字符串
    ids.value = ids.value.toString()
    // console.log(ids);
    
}
//批量删除
let deleetlist = async () => {
    if (a.aslist === 0) {
        await api.productAttr.productAttributedelete(ids.value)
        getclassify()
    }
}
//请求
let getclassify = async () => {
    let atv = await api.productAttr.getclassifyproductAttributelist({
        cid: Number(listaat.cid),
        pageNum: 1,
        pageSize: 10,
        type: listtype
    })
    // console.log(atv);
    tableData.list = atv.list
    tableData.pageNum = atv.pageNum
    tableData.pageSize = atv.pageSize
    tableData.total = atv.total
    tableData.totalPage = atv.totalPage

}
getclassify()
// 每页条数发生变化时的处理
let handleSizeChange = (val: number) => {
    // console.log(val);
    tableData.pageSize = val;
    getclassify()
}

// 改变当前页数
let handleCurrentChange = (val: number) => {
    // console.log(val);
    tableData.pageNum = val;
    getclassify()

}
//添加
let addlist = (i: number, zid: number) => {
    // console.log(i);
    // console.log(zid);
    // //修改
    if (i === 1) {
        router.push({
            path: '/pms/addProductAttr',
            query: {
                cid: Number(zid),
                scid:Number(listaat.cid),
                type: i
            }
        })
        return
    }
    router.push({
        path: '/pms/addProductAttr',
        query: {
            cid: Number(listaat.cid),
            scid:Number(listaat.cid),
            type: i
        }
    })


}

//删除
let deleet = async (data: any) => {
    // console.log(a.aslist);
    // console.log(data);
    ids.value = data.id

    // console.log(data);
    await api.productAttr.productAttributedelete(data.id)
    getclassify()


}

</script>


<style lang = "scss" scoped>
.data-list {
    display: flex;
    justify-content: space-between;
}

.el-card {
    margin-bottom: 20px;
}

.foot {
    display: flex;
    justify-content: space-between;
}
.Bread {
  position: sticky;
  top: -100px;
  margin: 0;
  width: 100%;
  border-bottom: 1px solid #eee;
  // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding-left: 20px;
  box-sizing: border-box;
}
</style>